<!-- 仅用于编目列表 -->
<!-- 批次信息 -->
<script lang="ts" setup>
import { ref, reactive, onMounted, watch, type VNode, h } from 'vue'
import TableView from '@/components/TableView.vue'
import {
  NSpace,
  NButton,
  NInput,
  useMessage,
  NScrollbar,
  NSpin,
  NDataTable,
  NPagination,
  type DataTableColumns,
  NModal,
  NTreeSelect,
  NForm,
  NFormItem,
  NTooltip,
  NSelect,
  type SelectOption,
  NEllipsis
} from 'naive-ui'
import { sendRequest } from '@/utils/api'
import FixedAction from '@/components/FixedAction.vue'
import { keysOf } from '@/utils/object'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { createH } from '@/components/ButtonShowH/CreateH'
import InfoBatchCollectList from '@/components/CollectProcess/InfoBatchCollectList/index.vue'
import useRouteQuery from '@/hooks/useRouteQuery'
import useFlush from '@/hooks/useFlush'
import useRouteReplace from '@/hooks/useRouteReplace'
import relative from '@/views/Collection/Process/MakeMenu/component/relative.vue'
const route = useRoute()
const routeReplace = useRouteReplace(route.query.redirect as string)
const rowKey: any = (row: any) => row.subItemCode || ''
const tableData: any = ref([])
const message = useMessage()
const loading = ref(false)
const form: any = reactive({
  orderTypeCode: null,
  remark: null,
  subItemCodeList: null //工单类型
})
const renderOption = ref(({ node, option }: { node: VNode; option: SelectOption }) =>
  h(NTooltip, null, {
    trigger: () => node,
    default: () => option.classificationName
  })
)
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    getTable()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    getTable()
  }
})
const columns: DataTableColumns = [
  {
    type: 'selection',
    width: '1rem'
  },
  {
    title: '藏品名称',
    key: 'itemName',
    align: 'center',
    width: '15rem'
  },
  {
    title: '版本类型',
    key: 'itemTypeName',
    align: 'center',
    width: '5rem'
  },
  {
    title: '征集方式',
    key: 'collectTypeName',
    align: 'center',
    width: '5rem'
  },
  {
    title: '年代',
    key: 'years',
    align: 'center',
    width: '5rem'
  },
  // {
  //   title: '编目状态',
  //   key: 'catalogStatusName',
  //   align: 'center',
  //   width: '5rem'
  // },
  // {
  //   title: '审核状态',
  //   key: 'process',
  //   align: 'center',
  //   width: '5rem'
  // },
  {
    title: '领取人',
    key: 'recipient',
    align: 'center',
    width: '5rem'
  },
  // {
  //   title: '领取状态',
  //   key: 'claimStatus',
  //   align: 'center',
  //   render: (e: any) => (e.claimStatus === 0 ? '未领取' : '已领取'),
  //   width: '5rem'
  // },
  {
    title: '状态',
    key: 'status',
    align: 'center',
    render: (e: any) => {
      if (e.assessStatusCode == 'A5004') {
        return '审核退回'
      }
      if (e.assessStatusCode == 'A5011') {
        return '编目通过'
      }
      if (e.assessStatusCode == 'A5012') {
        return '编目拒绝'
      }
      if (e.assessStatusCode == 'A5010') {
        return '编目审核中'
      }
      if (e.catalogStatusCode == 'A4503') {
        return '无需编目'
      }
      if (e.catalogStatusCode == 'A4502') {
        return '已编目'
      }
      if (e.catalogStatusCode == 'A4501' && e.claimStatus == 1) {
        return '已领取'
      }
      if (e.catalogStatusCode == 'A4501' && e.claimStatus == 0) {
        return '未编目'
      }
    },
    width: '5rem'
  },
  {
    title: '征集备注',
    key: 'solicitationRemark',
    align: 'center',
    width: '5rem',
    render({ solicitationRemark }) {
      return h(
        NEllipsis,
        { lineClamp: 2 },
        {
          default: () => solicitationRemark,
          tooltip: () => {
            return h('div', { style: 'width: 200px' }, { default: () => solicitationRemark })
          }
        }
      )
    }
  },
  {
    title: '藏品备注',
    key: 'collectionRemark',
    align: 'center',
    width: '10rem'
  },
  {
    title: '审批备注',
    key: 'opinions',
    align: 'center',
    width: '5rem',
    render({ opinions }) {
      return h(
        NEllipsis,
        { lineClamp: 2 },
        {
          default: () => opinions,
          tooltip: () => {
            return h('div', { style: 'width: 200px' }, { default: () => opinions })
          }
        }
      )
    }
  },
  {
    title: '操作',
    key: 'action',
    width: '10rem',
    align: 'center',
    fixed: 'right',
    render: (e: any) =>
      [
        e.catalog ? createH(NButton, e.catalog, () => openCatalogFn(e,1), '编目') : null,
        e.receive ? createH(NButton, e.receive, () => receiveFn(e), '领取') : null,
        e.notCatalog
          ? createH(NButton, e.notCatalog, () => noNeedCatalogFn(e.id), '无需编目')
          : null,
          e.edit
          ? createH(NButton, e.edit, () => openCatalogFn(e,3), '编辑')
          : null,
        e.subReview ? createH(NButton, e.subReview, () => submitPrereviewFn(e), '提交审核') : null,
        createH(NButton, true, () => detailFn(e), '详情'),
        e.del ?h(
          NButton,
    {
      type: 'error',
      quaternary: true,
      style:{
        display:e.del?'inline-block':'none',
      },
      onClick:  () => preDeleteFn(e)
    },
    {
      default: () => '删除'
    }
  ): null,
      ].filter(Boolean)
  }
]
//删除
const modalDeleteVisible = ref(false)
const choiceId = ref()
const preDeleteFn =(e:any)=>{
  modalDeleteVisible.value = true
  choiceId.value = e.id
}
const againDelete = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'collectingItemsDelete',
    override: {
      data: [choiceId.value]
      
    }
  })
  if (error) return message.error(error.message)
  message.success(res.data)
  modalDeleteVisible.value = false
  getTable()
}

// 提交审核确认
const submitPrereviewConfirmFn = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'batchReviewUpdate',
    override: {
      data: {
        subItemCodes: deleteId.value,
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code == 500) message.error(res.msg)
  else {
    message.success(res.msg)
  }
  getTable()
  prereviewVisible.value = false
}
const handleSubItemCode = ref()
// 提交审核
const submitPrereviewFn = (e: any) => {
  if(e?.subItemCode) 
  {deleteId.value = [e.subItemCode]
  handleSubItemCode.value = e.subItemCode
  choiceId.value = e.id}
  prereviewVisible.value = true
}
// 详情
const detailFn = (e: any) => {
  router.push({
    path: '/collection/process/makeMenu/processDetailNew',
    query: {
      id: e.id,
      subItemCode: e.subItemCode,
      type: e.catalogStatusCode == 'A4503' ? 1 : 0, //1.已点击无需编目,0.未点击无需编目
      idSelf: '3517272',
      batchCode: e.batchCode,
      redirect: router.currentRoute.value.fullPath
    }
  })
}
const openMakeMenuVisible = ref(false)
const openHistoryVisible = ref(false)//打开历史文献的弹窗
const chioceItem = ref()
const choiceType = ref()
const eItem = ref()
const goRouter = (e: any,type:any)=>{
  if(type==1&&e.itemTypeName?.indexOf('历史文献')!=-1){eItem.value = e;console.log(e); openHistoryVisible.value = true}//历史文献的编目
  else if(type==3&&e.itemTypeName?.indexOf('历史文献')!=-1){//历史文献的编辑
    router.push({
    path: '/collection/process/makeMenu/menu',
    query: {
      id: e.id,
      subItemCode: e?.subItemCode,
      type: type,
      code: e?.itemCode,
      batchCode: e.batchCode,
      redirect: router.currentRoute.value.fullPath
    }
  })
  }
  else{
    router.push({
    path: '/collection/process/makeMenu/menu',
    query: {
      id: e.id,
      subItemCode: e?.subItemCode,
      type: type,
      code: e?.itemCode,
      batchCode: e.batchCode,
      redirect: router.currentRoute.value.fullPath
    }
  })
  }
  
}
// 编目 type 1
const openCatalogFn = (e: any,type:any) => {
  choiceType.value = type
  chioceItem.value = e
  if(e.itemTypeCode?.length==4){
    openMakeMenuVisible.value = true
  }
  else{
    goRouter(e,type)
    
  }
}
// 领取
const receiveFn = (e: any) => {
  if(e?.subItemCode) 
  {
     deleteId.value = [e.subItemCode as any]
     choiceId.value = e.id
  }
  
  receiveConfirmVisible.value = true
}
// 领取确认
const receiveConfirmFn = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'batchReceiveUpdate',
    override: {
      data: {
        subItemCodes: deleteId.value,
      }
    }
  })
  loading.value = false

  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  getTable()
  
  receiveConfirmVisible.value = false
}
//无需编目
const noNeedCatalogFn = async (id: any) => {
  choiceId.value = id
  modalVisible.value = true
}
// 无需编目确认
const noNeedCatalogConfirmFn = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'noNeedCatalogUpdate',
    override: {
      data: {
        id: choiceId.value,
        remark: form.remark
      }
    }
  })
  loading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  getTable()
  modalVisible.value = false
}
// 返回
const goBack = () => {
  // history.back()
  routeReplace()
}
const deleteId:any = ref([])
const modalVisible = ref(false)
const receiveConfirmVisible = ref(false)
const prereviewVisible = ref(false)
const rowKeysChange = (v: any) => {
  deleteId.value = v
}
// 添加 type 2
const add = () => {
  router.push({
    path: '/collection/process/makeMenu/menu1',
    query: {
      id: route?.query?.id,
      subItemCode: 'ZJP2024042900001',
      type: 2,
      batchCode: route.query?.batchCode,
      redirect: router.currentRoute.value.fullPath
    }
  })
}
const tableLoading = ref() //loading
const getTable = async (reset?:any) => {
  let params = JSON.parse(JSON.stringify(form))
  if (params.mainStatus) {
    let tempParams: string[][] = []
    let tempParam = params.mainStatus.split('&')
    tempParam.forEach((item: string) => {
      tempParams.push(item.split('='))
    })
    tempParams.forEach((item: string[]) => {
      params[item[0]] = item[1]
    })
    delete params.mainStatus
  }
if(reset) paginationReactive.page = 1
  tableLoading.value = true
  sendRequest({
    module: 'collectProcess',
    api: 'qureyBatchCollectTableDataList',
    override: {
      params: {
        key: route.query?.batchCode,
        ...params,
        page: paginationReactive.page,
        limit: paginationReactive.pageSize,
      }
    }
  }).then(async ([err, res]) => {
    if (err) return
    tableLoading.value = false
    tableData.value = res.data?.list
    deleteId.value = []
    // tableData.value =Array(10).fill({id:1})
    paginationReactive.itemCount = res.data?.totalCount
  })
}
const getDetail = async () => {
  getTable()
  // 修改回显
}
const flat: any = ref(false)
useRouteQuery('id', () => {
  //id改变时刷新
  if (route.query.id) {
    getDetail()
  }
})
useFlush('flushMakeMenuCollectList', () => getDetail()) //手动刷新
// watch(
//   () => route.path,
//   () => {
//     if (route.path == '/collection/process/makeMenu/collectList') {
//       // debugger
//       getDetail()
//     }
//     if (route.query.flat) flat.value = route.query.flat
//   },
//   { deep: true, immediate: true }
// )
const banbenList = ref<any>([])
const getTreeSelect = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'listTreeAll',
    override: {
      params: {
        statusCode: 'A4901'
      }
    }
  })
  if (error) return message.error(error.message)
  banbenList.value = res.data
}
const statusList: any = ref()
const assessStatusList =ref()
const collectFactionList: any = ref()
const codeFn = async (code: any, refValue: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: code
      }
    }
  })
  if (error) return message.error(error.message)
  refValue.value = res?.data?.map((it: any) => {
    return { value: it.dicCode, label: it.dicName }
  })
}
const reset = () => {
  form.catalogStatusCode = null
  form.claimStatus = null
  form.assessStatusCode = null
  form.collectTypeCode = null
  form.itemName = null
  form.itemTypeCode = null
  form.recipient = null
  form.assetCode = null
  form.mainStatus = null
}

// 状态整合
const mainStatusList = ref([
  {
    label: '未编目',
    value: 'catalogStatusCode=A4501&claimStatus=0'
  },
  {
    label: '已领取',
    value: 'catalogStatusCode=A4501&claimStatus=1'
  },
  {
    label: '已编目',
    value: 'catalogStatusCode=A4502'
  },
  {
    label: '无需编目',
    value: 'catalogStatusCode=A4503'
  },
  {
    label: '编目审核中',
    value: 'assessStatusCode=A5010'
  },
  {
    label: '编目拒绝',
    value: 'assessStatusCode=A5012'
  },
  {
    label: '编目通过',
    value: 'assessStatusCode=A5011'
  },
  {
    label: '审核退回',
    value: 'assessStatusCode=A5004'
  }
])
onMounted(async () => {
  //页面首次刷新
  getDetail()
  getTreeSelect()
  codeFn('A45', statusList) //编目状态A45
  codeFn('A50', assessStatusList) //审核状态A46
  codeFn('A30', collectFactionList) //征集方式A30
})
</script>

<template>
  <DetailFormProvider>
    <div class="main">
      <div class="form_content">
        <NScrollbar>
          <NSpin :show="false">
            <div class="content">
              <div class="topTitle">批次信息</div>
              <div class="bd-content">
                <InfoBatchCollectList :id="route?.query?.batchCode as string" />
              </div>
              <NSpace justify="space-between">
                <div class="topTitle">藏品信息</div>
                <NSpace align="end">
                  <!-- 暂时隐藏 -->
                  <NButton
                    type="primary"
                    style="width: 78px"
                    class="btnAdd"
                    @click="add"
                  >
                    添加
                  </NButton>
                  <NButton
                    color="#5FB17F"
                    ghost
                    @click="receiveFn(null)"
                    :disabled="deleteId.length ? false : true"
                  >
                    批量领取
                  </NButton>
                  <NButton
                    color="#5FB17F"
                    ghost
                    @click="submitPrereviewFn(null)"
                    :disabled="deleteId.length ? false : true"
                  >
                    批量提交审核
                  </NButton>
                </NSpace>
              </NSpace>
              <div class="table">
                  <NForm
                    :show-feedback="false"
                    label-placement="left"
                    style="margin-bottom:10px"
                  >
                    <NSpace justify="start">
                      <NFormItem label="藏品名称:">
                        <NInput
                          placeholder="输入藏品名称"
                          v-model:value="form.itemName"
                        />
                      </NFormItem>
                      <NFormItem label="版本类型:">
                        <n-tree-select
                          :options="banbenList"
                          children-field="childList"
                          key-field="classificationCode"
                          label-field="classificationName"
                          v-model:value="form.itemTypeCode"
                          :render-option="renderOption"
                          placeholder="选择版本类型"
                          clearable
                          filterable
                          style="width: 130px"
                        />
                      </NFormItem>
                       <!-- <NFormItem label="审核状态:">
                        <NSelect
                          :options="assessStatusList"
                          v-model:value="form.assessStatusCode"
                          placeholder="选择审核状态"
                          clearable
                          filterable
                          style="width: 130px"
                        />
                      </NFormItem> -->
                      <NFormItem label="征集方式:">
                        <NSelect
                          :options="collectFactionList"
                          v-model:value="form.collectTypeCode"
                          placeholder="选择征集方式"
                          clearable
                          filterable
                          style="width: 130px"
                        />
                      </NFormItem>
                     
                      <!-- <NFormItem label="编目状态:">
                        <NSelect
                          :options="statusList"
                          v-model:value="form.catalogStatusCode"
                          placeholder="选择编目状态"
                          clearable
                          filterable
                          style="width: 130px"
                        />
                      </NFormItem> -->
                      <!-- <NFormItem label="领取状态:">
                        <NSelect
                          :options="[{label:'未领取',value:0},{label:'已领取',value:1}]"
                          v-model:value="form.claimStatus"
                          placeholder="选择领取状态"
                          clearable
                          filterable
                          style="width: 130px"
                        />
                      </NFormItem> -->
                      <NFormItem label="状态:">
                        <NSelect
                          :options="mainStatusList"
                          v-model:value="form.mainStatus"
                          placeholder="选择状态"
                          clearable
                          filterable
                          style="width: 130px"
                        />
                      </NFormItem>
                      <NFormItem label="领取人:">
                        <NInput
                          placeholder="输入领取人"
                          v-model:value="form.recipient"
                          @keyup.enter="getTable(true)"
                        />
                      </NFormItem>
                      <NFormItem label="馆藏码:">
                      <NInput
                      placeholder="输入馆藏码"             
                      v-model:value="form.assetCode"             
                      @keyup.enter="getTable(true)"
                            />      
                    </NFormItem>   
                      <NFormItem>
                        <NButton
                          type="primary"
                          style="width: 78px"
                          ghost
                          @click="getTable(true)"
                        >
                          查询
                        </NButton>
                      </NFormItem>
                      <NFormItem>
                        <NButton
                          style="width: 78px"
                          ghost
                          type="primary"
                          @click="reset()"
                        >
                          重置
                        </NButton>
                      </NFormItem>
                      <!-- </NSpace> -->
                    </NSpace>
                  </NForm>
                <NSpace>
                 
                </NSpace>

                  <NDataTable
                    :bordered="false"
                    :columns="columns"
                    :data="tableData"
                    :rowKey="rowKey"
                    max-height="300px"
                    min-height= "300px"
                    :checked-row-keys="deleteId"
                    @update:checked-row-keys="rowKeysChange"
                    :loading="tableLoading"
                  />
                  <NPagination
                    show-size-picker
                    show-quick-jumper
                    :page-sizes="paginationReactive.pageSizes"
                    :item-count="paginationReactive.itemCount"
                    :page="paginationReactive.page"
                    :page-size="paginationReactive.pageSize"
                    @update:page="paginationReactive.onChange"
                    @update:page-size="paginationReactive.onUpdatePageSize"
                    :suffix="() => '页'"
                    style="margin-top:10px"
                  >
                    <template #prefix>
                      <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
                    </template>
                  </NPagination>
              </div>
              <!-- 无需编目 -->
              <NModal
                :auto-focus="false"
                v-model:show="modalVisible"
              >
                <VDialogContent
                  @close="modalVisible = false"
                  @submit="noNeedCatalogConfirmFn"
                  title="备注"
                >
                  <div style="display: flex; width: 350rem">
                    <span style="color: red">*</span>
                    备注:
                    <NInput
                      v-model:value="form.remark"
                      type="textarea"
                      placeholder="备注"
                      style="width: 300rem; margin-left: 10px"
                      rows="5"
                    />
                  </div>
                </VDialogContent>
              </NModal>
              <!-- 领取 -->
              <NModal
                :auto-focus="false"
                v-model:show="receiveConfirmVisible"
              >
                <VDialogContent
                  @close="receiveConfirmVisible = false"
                  @submit="receiveConfirmFn"
                  title="提示"
                >
                  <div
                    style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem"
                  >
                    您确定要领取该批次进行编目吗？
                  </div>
                </VDialogContent>
              </NModal>
              <!-- 编目 -->
              <NModal
                :auto-focus="false"
                v-model:show="openMakeMenuVisible"
              >
                <VDialogContent
                  @close="()=>{openMakeMenuVisible = false;goRouter(chioceItem,choiceType)}"
                  title="提示"
                  closeText = '关闭'
                  :submitVisible = false
                >
                  <div
                    style="width: 350rem; height: 100rem; text-align: center; line-height: 100rem"
                  >
                  您编目的藏品类型未确定，需手动选择类型编目
                  </div>
                </VDialogContent>
              </NModal>
              <!-- 编目历史文献 -->
              <!-- openHistoryVisible -->
              <NModal
                :auto-focus="false"
                v-model:show="openHistoryVisible"
              >
                <VDialogContent
                  @close="()=>{openHistoryVisible = false}"
                  title="丛编关联"
                  closeText = '关闭'
                  :submitVisible = false
                  style="width:97%"
                >
                      <relative :eItem='eItem' @close="()=>{openHistoryVisible = false}"/>
                </VDialogContent>
              </NModal>
              <!-- 提交审核 -->
              <NModal
                :auto-focus="false"
                v-model:show="prereviewVisible"
              >
                <VDialogContent
                  @close="prereviewVisible = false"
                  @submit="submitPrereviewConfirmFn"
                  title="提示"
                >
                  <div
                    style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem"
                  >
                  是否提交当前编目进行审核？
                  </div>
                </VDialogContent>
              </NModal>
              <!-- 删除 -->
              <NModal
    :auto-focus="false"
    v-model:show="modalDeleteVisible"
  >
    <VDialogContent
      @close="modalDeleteVisible = false"
      @submit="againDelete"
      title="警告"
    >
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        是否确定删除？
      </div>
    </VDialogContent>
  </NModal>
            </div>
          </NSpin>
        </NScrollbar>
      </div>
    </div>
  </DetailFormProvider>
  <FixedAction>
    <NSpace justify="center">
      <NButton
        style="width: 78px"
        ghost
        @click="goBack"
      >
        返回
      </NButton>
    </NSpace>
  </FixedAction>
</template>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 15rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .bd-card {
    padding: 20rem;
    background-color: #e1e1e1;
  }

  .link_content {
    width: 100%;
    display: flex;
    margin-bottom: 10rem;

    .link_item {
      width: 175rem;
      height: 68rem;
      background: #e6e6e6;
      border-radius: 6rem;
      border: 1rem solid #ececec;
      display: flex;
      align-items: center;
      padding-left: 5rem;
      text-decoration: none;
      color: initial;

      img {
        display: block;
        width: 35rem;
        height: 35rem;
        border-radius: 50%;
      }
    }
  }

  .link_item {
    width: 175rem;
    height: 68rem;
    background: #e6e6e6;
    border-radius: 6rem;
    border: 1rem solid #ececec;
    display: flex;
    align-items: center;
    padding-left: 5rem;
    text-decoration: none;
    color: initial;
  }

  img {
    display: block;
    width: 35rem;
    height: 35rem;
    border-radius: 50%;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10rem;
    }

    .inputWH {
      width: 300rem;
    }

    .inputWHmin {
      width: 150rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;
      @include CommonFont;
    }
  }

  .approve {
    display: flex;
    width: 100%;
    margin-bottom: 20rem;
    border-bottom: 1px dashed #bc9e70;

    .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 100rem;
      width: auto;
      height: 90rem;
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      padding: 12rem;
      margin-right: 10rem;
      margin-bottom: 20rem;

      span:first-child {
        font-size: 16rem;
      }

      span:last-child {
        font-weight: 500;
        color: #5fb17f;
      }
    }
  }

  .link_item2 {
    width: 155rem;
    height: 68rem;
    background: #e6e6e6;
    border-radius: 6rem;
    border: 1rem solid #ececec;
    display: flex;
    align-items: center;
    padding-left: 5rem;
    text-decoration: none;
    color: initial;
  }
}

.link_item1 {
  width: 155rem;
  height: 68rem;
  background: #e6e6e6;
  border-radius: 6rem;
  border: 1rem solid #ececec;
  display: flex;
  align-items: center;
  padding-left: 5rem;
  text-decoration: none;
  color: initial;
}

//流程样式
.progress {
  width: 100%;
  min-height: 50rem;
  background-color: #d5e2d8;
  border-radius: 5rem;
  padding: 10rem;
  display: flex;
  align-items: center;
  margin-top: 10rem;
}

.iconStyle {
  margin-right: 5rem;
  color: #5fb17f;
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
